<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%
	String path = request.getContextPath();
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>update</title>
<link rel="stylesheet" type="text/css" href="<%=path%>/css/common.css"/>
<link rel="stylesheet" type="text/css" href="<%=path %>/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="<%=path %>/themes/icon.css"/>
<script type="text/javascript" src="<%=path %>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path%>/js/common.js"></script>
<style type="text/css">
.textbox {
	height: 20px;
	margin: 0;
	padding: 0 2px;
	box-sizing: content-box;
}
</style>
<script type="text/javascript">
function returnQuery(){
	var form = document.forms[1];
	form.action = "<%=path%>/user/queryUser.do";
	form.submit();
	waiting();
}

function show() {
	$('#selectMenu').dialog('open');
	loadMenu();
}

function loadMenu(){
	$("#dg").datagrid({
		singleSelect : false,
		autoRowHeight : true,
		fitColumns: false,//设置为true将自动使列适应表格宽度以防止出现水平滚动,false则自动匹配大小
        striped : true,//设置为true将交替显示行背景
        remoteSort : false,
        loadMsg : '数据装载中......',  
        pagination : true,//显示最下端的分页工具栏
        rownumbers : true,//显示行数
        //sortName: "name", //初始化表格时依据的排序 字段 必须和数据库中的字段名称相同
        //sortOrder: "asc", //正序
		method :'POST',
		url :'<%=path %>/usermenu/queryMenu.do',
		//toolbar : '#toolbar',
		/* toolbar: [
			{
	            text: '选择',
	            iconCls: 'icon-add',
	            handler: function(){
	            	getSelections();
	            }
	        },
	        {
	            text: '关闭',
	            iconCls: 'icon-cancel',
	            handler: function(){
	            	closeSelections();
	            }
	        }
	    ], */
		onLoadSuccess:function(data){
			
		},
		columns:[[
		  	{field:'menuName', width:$(this).width() * 0.1, align:'center', title:'菜单名称'},
		  	{field:'menuUri', width:$(this).width() * 0.3, align:'center', title:'菜单URI'},
		  	{field:'menuDesc', width:$(this).width() * 0.2, align:'center', title:'菜单描述'}
		]]
	});
}

function doSearch(value){
	$('#dg').datagrid('load',{
		menuName : value
		}
	);
}

function doSearch2(){
	$('#dg').datagrid('load',{
		menuName : $("#menuName").val()
		}
	);
}
// 单选
function getSelected(){
    var row = $('#dg').datagrid('getSelected');
    if (row){
    	$.messager.alert('Info', row.menuId+","+row.menuName);
    }
}
// 多选
function getSelections(){
    var menuName = [];
    var info = [];
    var rows = $('#dg').datagrid('getSelections');
    if(rows.length == 0){
    	$.messager.alert('温馨提示', '没有选择任何菜单!', 'error');
    	return;
    }
    for(var i=0; i<rows.length; i++){
        var row = rows[i];
        var flag = checkRepeat(row.menuId, row.menuName);
        if(flag){
        	menuName.push('<span id="'+row.menuId+'">'+row.menuName+
                    '<input type="hidden" name="menuIds" value="'+row.menuId+'"/>'+
                    '<a href="#" onclick=\'delSpan("'+row.menuId+'");\'>'+
                    '<img src="<%=path %>/themes/icons/edit_remove.png"/></a></span>');
        }else{
        	info.push(row.menuName+'，已经添加，不能重复添加！');
        }
    }
    if(info == ""){
    	//$.messager.alert('Info', ss.join('<br/>'));
       	$("#selectedMenus").html(menuName.join('<br/>'));
       	$('#selectMenu').dialog('close');
    }else{
    	$.messager.alert('温馨提示', info.join('<br/>'), 'error');
    }
}

function checkRepeat(id, name){
	var flag = true;
	$("input[name='menuIds']").each(function(){
		if($(this).val() == id){
			flag = false;
		}
	});
	return flag;
}

function closeSelections(){
	$('#selectMenu').dialog('close');
}

function delSpan(spanId){
	//$.messager.alert('info', spanId);
	$('#'+spanId).remove();
}

function saveData(){
	document.forms[0].submit();
	waiting();
}
</script>
</head>
<body style="background: #FFFFFF">
	<form id="form1" name="form1" method="post" action="<%=path %>/user/saveUserMenu.do">
	<fieldset class="fieldset-self">
	<legend>用户信息</legend>
	<table width="100%">
		<tr>
			<td align="right">用户名：</td>
			<td align="left">${user.userName }</td>
			<td align="right">电子邮件：</td>
			<td align="left">${user.mail }</td>
			<td align="right">电话号码：</td>
			<td align="left">${user.phone }</td>
			<td align="right">用户级别：</td>
			<td align="left">
				<c:if test="${user.userLevel == '0' }">
					系统管理员
				</c:if>
				<c:if test="${user.userLevel != '0' }">
					普通用户
				</c:if>
			</td>
		</tr>
		<tr>
			<td colspan="8">
				拥有的菜单：<a href="#" class="easyui-linkbutton" plain="true" icon="icon-add" onclick="show();">添加</a>
			</td>
		</tr>
		<tr>
			<td colspan="8">
				<c:forEach items="${menuList }" var="menu">
					<span id="${menu.menuId }">${menu.menuName }
						<input type="hidden" name="menuIds" value="${menu.menuId }"/>
						<a href="#" class="easyui-linkbutton" plain="true" icon="icon-remove" onclick='delSpan("${menu.menuId }");'></a>
					</span><br/>
				</c:forEach>
				<span id="selectedMenus"></span>
			</td>
		</tr>
		<tr id="menuList" style="display: none">
			<td id="menuInfo" colspan="8"></td>
		</tr>
		<tr>
			<td colspan="8" align="center">
				<form:hidden path="user.userId" id="userId"/>
				<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="saveData();">保存</a>&nbsp;
				<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="returnQuery();">取消</a>&nbsp;
			</td>
		</tr>
	</table>
	</fieldset>
	</form>
	<div id="selectMenu" class="easyui-dialog"
		data-options="title: '菜单选择', closed: true, toolbar : '#toolbar', cache: false, modal: true, width: 730, top:100">
    	<div id="toolbar">
    		<table width="100%" border="0">
    			<tr>
    				<td align="left">
    					<a href="#" class="easyui-linkbutton" iconCls="icon-ok" plain="true" onclick="getSelections();">选择</a>
	    				<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="closeSelections();">关闭</a>
    				</td>
    				<td align="center">
    					<input class="easyui-searchbox" data-options="prompt:'菜单名称',searcher:doSearch" style="width:150px"/>
    				</td>
    				<td align="center">
    					<input type="text" id="menuName" name="menuName" class="easyui-textbox" data-options="required:false" style="width: 150px;"/>
	    				<a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="doSearch2();">查询</a>
    				</td>
    			</tr>
    		</table>
		</div> 
		<table id="dg" title="菜单选择"></table>
	</div>
	<form></form>
</body>
</html>
